$(function () {
  $('#jqGrid').jqGrid({
    url: baseURL + 'product/productcaseinfo/list',
    datatype: 'json',
    colModel: [
      { label: '案例类型', name: 'typeName', index: 'type_name', width: 80 },
      { label: '位置', name: 'position', index: 'position', width: 80 },
      { label: '风格', name: 'style', index: 'style', width: 80 },
      { label: '创建人', name: 'creater', index: 'creater', width: 80 },
      { label: '创建时间', name: 'createTime', index: 'create_time', width: 80 },
      { label: '更新人', name: 'updater', index: 'updater', width: 80 },
      { label: '更新时间', name: 'updateTime', index: 'update_time', width: 80 }
    ],
    viewrecords: true,
    height: 385,
    rowNum: 10,
    rowList: [10, 30, 50],
    rownumbers: true,
    rownumWidth: 25,
    autowidth: true,
    multiselect: true,
    pager: '#jqGridPager',
    jsonReader: {
      root: 'page.list',
      page: 'page.currPage',
      total: 'page.totalPage',
      records: 'page.totalCount'
    },
    prmNames: {
      page: 'page',
      rows: 'limit',
      order: 'order'
    },
    gridComplete: function () {
      //隐藏grid底部滚动条
      $('#jqGrid').closest('.ui-jqgrid-bdiv').css({ 'overflow-x': 'hidden' })
    }
  })
  //下拉列表
  $('.select-grid').select2({
    placeholder: '请选择',
    theme: 'classic',
    language: 'zh-CN',
  })
  //案例图上传
  uploadProductPhoto()
  uploadProductCaseVideo()
})

function uploadProductPhoto () {
  var filePath = filesURL
  var fileSize = 10 * 1024 * 1024
  //文件上传
  var productphoto = window.productphoto = WebUploader.create({
    //自动上传
    auto: true,
    //swf文件路径
    swf: '../../../libs/Uploader.swf',
    // 文件接收服务端。
    server: '/aiken/file/upload',
    pick: {
      id: '#btnContainerCase',
      multiple: true,
      innerHTML: '上传图片'
    },
    //参数
    formData: {
      'filePath': '/case/photo/' + getPath(),
      'fileType': 0,
      'fileSize': fileSize
    },
    //单个文件大小限制
    fileSingleSizeLimit: fileSize,
    // 只允许选择图片文件。
    accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/*'
    },
    duplicate: true //不去重
  })
  $list2 = $('#thelist')
  ratio = window.devicePixelRatio || 2,
    thumbnailWidth = 90 * ratio,
    thumbnailHeight = 90 * ratio,
    // 当有文件添加进来的时候
    productphoto.on('fileQueued', function (file) {
      var $li = $('<div id="' + file.id + '" class="img_list addphoto">'
        + '<div>'
        + '<img src="">'
        + '</div>'
        + '<span class="close_Img">X</span>'
        + '</div>'),
        $img = $li.find('img')
      // $list为容器jQuery实例
      $list2.append($li)
      // 创建缩略图
      // 如果为非图片文件，可以不用调用此方法。
      // thumbnailWidth x thumbnailHeight 为 100 x 100
      productphoto.makeThumb(file, function (error, src) {
        if (error) {
          $img.replaceWith('<span>不能预览</span>')
          return
        }
        $img.attr('src', src)
      }, thumbnailWidth, thumbnailHeight)
    })
  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  productphoto.on('uploadSuccess', function (file, data) {
    var pics = {}
    pics['picName'] = data[0].saveName
    pics['picAddress'] = data[0].filePath + '/' + data[0].saveName
    pics['fileId'] = file.id
    console.log(vm.productCaseInfo)
    vm.productCaseInfo.picList.push(pics)
    $('#' + file.id).find('img').attr('layer-src', filePath + data[0].filePath + '/' + data[0].saveName)
  })
// 完成上传完了，成功或者失败，先删除进度条。
  productphoto.on('uploadComplete', function (file) {
    vm.xmTanUploadImg()
  })
  // 文件上传失败，显示上传出错。
  productphoto.on('uploadError', function (file) {
    alert('上传失败了!')
  })
  productphoto.on('error', function (type) {
    if (type === 'Q_EXCEED_NUM_LIMIT') {
      alert('最多允许上传1张')
    }
    if (type == 'Q_TYPE_DENIED') {
      alert('请上传GIF,JPG,JPEG,BMP,PNG格式文件')
    } else if (type == 'F_EXCEED_SIZE') {
      alert('文件大小不能超过200KB')
    } else {
      alert('上传出错！请检查后重新上传！错误代码' + type)
    }
  })
  //点击删除
  $('#thelist').on('click', '.close_Img', function () {
    var delId = $(this).parents('.img_list').attr('id')
    debugger
    if (delId.indexOf('WU_FILE') != -1) {
      //删除图片数组地址
      for (index in vm.productCaseInfo.picList) {
        if (delId == vm.productCaseInfo.picList[index]['fileId']) {
          // 删除服务器上的图片地址
          $.ajax({
            url: baseURL + '/file/delete',
            data: { filePath: vm.productCaseInfo.picList[index]['picAddress'] },
            type: 'post',
            dataType: 'json',
            success: function (o, textStatus) {
              if (o.status == 1) {
                vm.productCaseInfo.picList.splice(index, 1)
                productphoto.reset()//重置队列
                console.log('删除文件成功...')
              } else {
                alert(o.message)
              }
            }
          })
        }
      }
    } else {
      var ids = []
      ids.push(delId)
      $.ajax({
        type: 'POST',
        url: baseURL + '/product/productcasepics/updatePicIsDelById',
        contentType: 'application/json',
        data: JSON.stringify(ids),
        success: function (r) {
          if (r.code == 0) {
            alert('操作成功', function (index) {
              $('#jqGrid').trigger('reloadGrid')
            })
          } else {
            alert(r.msg)
          }
        }
      })

    }
    /* productphoto.removeFile(delId,true);*/
    //移除节点
    $(this).parents('.img_list').remove()
  })

}

//上传视频初始化
function uploadProductCaseVideo () {
  var filePath = filesURL
  var fileSize = 100 * 1024 * 1024
  //文件上传
  var productcasevideo = WebUploader.create({
    //自动上传
    auto: true,
    //swf文件路径
    swf: '../../../libs/Uploader.swf',
    // 文件接收服务端。
    server: '/aiken/file/upload',
    pick: {
      id: '#btnContainerCaseVideo',
      multiple: true,
      innerHTML: '上传视频'
    },
    //参数
    formData: {
      'filePath': '/case/video/' + getPath(),
      'fileType': 3,
      'fileSize': fileSize
    },
    //单个文件大小限制
    fileSingleSizeLimit: fileSize,
    // 只允许选择图片文件。
    accept: {
      title: 'video',
      extensions: '3gp,mp4,rmvb,mov,avi,m4v',
      mimeTypes: 'video/*,audio/*,application/*'
    },
    duplicate: true //不去重
  })
  $list3 = $('#thelistVideo')
  // 当有文件添加进来的时候
  productcasevideo.on('fileQueued', function (file) {
    // $list为容器jQuery实例
    $list3.append('<div id="' + file.id + '" class="item">' +
      '<h4 class="info">' + file.name + '</h4>' +
      '<p class="state">等待上传...</p>' +
      '</div>');
  })
  // 文件上传过程中创建进度条实时显示。
  productcasevideo.on('uploadProgress', function (file, percentage) {
    var $li = $('#' + file.id),
      $percent = $li.find('.progress .progress-bar')
// 避免重复创建
    if (!$percent.length) {
      $percent = $('<div " class="progress progress-striped active">' +
        '<div class="progress-bar" style="height:20px; background-color:red; role="progressbar" style="width: 0%">' +
        '</div>' +
        '</div>').appendTo($li).find('.progress-bar')
    }

    $li.find('p.state').text('上传中')
    $percent.css('width', percentage * 100 + '%')

  })

  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  productcasevideo.on('uploadSuccess', function (file, data) {
    $('#' + file.id).find('p.state').text('已上传');
    var video = {}
    video['picName'] = data[0].saveName
    video['picAddress'] = data[0].filePath + '/' + data[0].saveName
    /*video['fileId'] = file.id*/
    /*console.log(vm.productCaseInfo);*/
    vm.productCaseInfo.videoList.push(video)
    alert('上传成功')
    /* $('#' + file.id).find('i').attr('videosrc', filePath + data[0].filePath + '/' + data[0].saveName)*/
  })
// 完成上传完了，成功或者失败，先删除进度条。
  productcasevideo.on('uploadComplete', function (file) {
    $('#' + file.id).find('.progress').fadeOut()
  })

  // 文件上传失败，显示上传出错。
  productcasevideo.on('uploadError', function (file) {
    alert('上传失败了!')
  })
  productcasevideo.on('error', function (type) {
    if (type === 'Q_EXCEED_NUM_LIMIT') {
      alert('最多允许上传1张')
    }
    if (type == 'Q_TYPE_DENIED') {
      alert('请上传3GP,MP4,RMVB,MOV,AVI,M4V格式的视频')
    } else if (type == 'F_EXCEED_SIZE') {
      alert('文件大小不能超过100M')
    } else {
      alert('上传出错！请检查后重新上传！错误代码' + type)
    }
  })
  /* $('#thelistVideo').on('click', '.layui-icon', function () {
       var url = $(this).attr('videosrc')
      vm.openVideo(url);
   })*/

}

var vm = new Vue({
  el: '#rrapp',
  data: {
    showList: true,
    title: null,
    q: {
      typeId: 0
    },
    productCaseInfo: {
      caseId: '0',
      position: '',
      style: '',
      picList: [],
      videoList: []
    },
    caseTypes: [],
    picList: [],
    videoList: [],
    src: filesURL
  },
  mounted () {
    //产品类型
    $.getJSON(baseURL + 'product/productcasetype/getAllCaseTypes', function (r) {
      vm.caseTypes = r.caseTypes
    })
  },
  methods: {
    query: function () {
      vm.reload()
    },
    add: function () {
      vm.showList = false
      vm.title = '新增'
      vm.productCaseInfo = {
        caseId: '0',
        position: '',
        style: '',
        picList: [],
        videoList: []
      }
      $('.select-caseType').val('0').trigger('change')
      vm.picList = []
      vm.videoList = []
      $('#thelist').empty()
    },
    update: function (event) {
      var id = getSelectedRow()
      if (id == null) {
        return
      }
      vm.showList = false
      vm.title = '修改'
      $('#thelist').find('div').remove('.addphoto')
      vm.getInfo(id)
    },
    saveOrUpdate: function (event) {
      vm.productCaseInfo.caseId = $('.select-caseType').val()
      if (vm.validator()) {
        return
      }
      $('#btnSaveOrUpdate').button('loading').delay(1000).queue(function () {
        var url = vm.productCaseInfo.id == null ? 'product/productcaseinfo/save' : 'product/productcaseinfo/update'
        $.ajax({
          type: 'POST',
          url: baseURL + url,
          contentType: 'application/json',
          data: JSON.stringify(vm.productCaseInfo),
          success: function (r) {
            if (r.code === 0) {
              layer.msg('操作成功', { icon: 1 })
              vm.reload()
              $('#btnSaveOrUpdate').button('reset')
              $('#btnSaveOrUpdate').dequeue()
            } else {
              layer.alert(r.msg)
              $('#btnSaveOrUpdate').button('reset')
              $('#btnSaveOrUpdate').dequeue()
            }
          }
        })
      })
    },
    del: function (event) {
      var ids = getSelectedRows()
      if (ids == null) {
        return
      }
      var lock = false
      layer.confirm('确定要删除选中的记录？', {
        btn: ['确定', '取消'] //按钮
      }, function () {
        if (!lock) {
          lock = true
          $.ajax({
            type: 'POST',
            url: baseURL + 'product/productcaseinfo/delete',
            contentType: 'application/json',
            data: JSON.stringify(ids),
            success: function (r) {
              if (r.code == 0) {
                layer.msg('操作成功', { icon: 1 })
                $('#jqGrid').trigger('reloadGrid')
              } else {
                layer.alert(r.msg)
              }
            }
          })
        }
      }, function () {
      })
    },
    getInfo: function (id) {
      $.get(baseURL + 'product/productcaseinfo/info/' + id, function (r) {
        vm.picList = []
        vm.productCaseInfo = r.res.productCaseInfo
        vm.productCaseInfo.picList = []
        vm.productCaseInfo.videoList = []
        vm.picList = r.res.pics
        $('.select-caseType').val(r.res.productCaseInfo.caseId).trigger('change')
      })
    },
    reload: function (event) {
      vm.showList = true
      var page = $('#jqGrid').jqGrid('getGridParam', 'page')
      $('#jqGrid').jqGrid('setGridParam', {
        postData: { 'typeId': $('.select-qtypeid').val() },
        page: page
      }).trigger('reloadGrid')
    },
    validator: function () {
      if ($('.select-caseType').val() == '0') {
        alert('案例类型不能为空')
        return true
      }
    },
    //预览图片
    xmTanUploadImg: function () {
      layer.photos({
        photos: '.uploader-list'
        , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
      })
    },
    //预览视频
    openVideo: function (url) {
      window.open(url)
    }
  }
})